<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, " />
		<title>弹性布局 - vw/vh布局</title>
		<style type="text/css">
			body{
				background-image: url(images/bg.jpg);
				background-size: 100vw 100vh;
			}
			header{
				height:15vh;
				display: flex;
				flex-direction: column;
				align-content:space-around;
				align-items:center;
				justify-content: center;
				font-size: 5vmin;
				color:white;;
			}
			header h3, header h5{
				margin: 0;
			}
			main{
				height: 75vh;
			}
			section.logo_container{
				height:20vh;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 5vmin;				
			}section img{
				width:20vmin;
				height:20vmin;
				border-radius: 10vmin;
			}
			section form{
				width:80vmin;
				background-color: rgba(233,233,233,0.4);
				border-radius: 3vmin;
				display: flex;
				justify-content: center;
				margin:auto;
			}
			.form_container{
				display: flex;
				flex-direction: column;
				height: 55vh;
				justify-content: space-around;
				align-items: center;
			}
			.form_container label{
				display: flex;
				justify-content: center;
			}			
			.form_container img{
				width:8vmin;
				height:8vmin;
			}
			#username, #password{
				width:50vmin;
				height:5vh;
				background-color: white;
				border:0.2vm solid #112233;
				text-align: center;
				font-size: 5vmin;				
			}
			input[type="submit"],input[type="reset"]{
				width:20vmin;
				height:8vh;
				font-size: 5vmin;	
				margin: auto 2vmin;
			}
			footer{
				height: 10vh;
				display: flex;
				align-items:center;
				justify-content: center;
				font-size: 4vmin;
				color:#112233;
			}
		</style>
	</head>
	<body>
		<header >
			<h5>湖北工程学院</h5>
			<h3>毕业论文管理系统</h3>
		</header>
		<main>
			<section class="logo_container">
				<img src="images/logo.jpg" >
			</section>
			<section>
				<form action="" method="post">
					<div  class="form_container" >
					<label><img src="images/username.png" ><input type="text" name="username" id="username" placeholder="用户名" /></label>
					<label><img src="images/password.png" ><input type="password" name="password" id="password" placeholder="密码" /></label>
					<label><input type="submit" value="登录"/> <input type="reset" value="重填"/></label>						
					</div>
				</form>
			</section>
		</main>
		<footer>
			湖北工程学院 教务处
		</footer>
	</body>
</html>
